/**
 * Markdown 查看器组件
 * 用于渲染 Markdown 内容为 HTML
 * 支持代码高亮、数学公式、图表等扩展功能
 */

'use client';

import { Viewer } from '@bytemd/react';
import gfm from '@bytemd/plugin-gfm';           // GitHub 风格 Markdown 支持
import highlight from '@bytemd/plugin-highlight'; // 代码语法高亮
import math from '@bytemd/plugin-math';          // 数学公式支持
import mermaid from '@bytemd/plugin-mermaid';    // Mermaid 图表支持
import { useMemo } from 'react';

// 导入查看器样式
import 'bytemd/dist/index.css';
import 'highlight.js/styles/github.css';

// 组件属性接口
interface MarkdownViewerProps {
  value: string;      // Markdown 内容
  className?: string; // 自定义 CSS 类名
}

// 查看器插件配置
const plugins = [
  gfm(),        // GitHub 风格 Markdown（表格、任务列表等）
  highlight(),  // 代码语法高亮
  math(),       // LaTeX 数学公式
  mermaid(),    // Mermaid 图表
];

/**
 * Markdown 查看器组件
 * @param value Markdown 内容字符串
 * @param className 自定义 CSS 类名
 * @returns JSX 元素
 */
export default function MarkdownViewer({
  value,
  className = '',
}: MarkdownViewerProps) {
  // 查看器配置，使用 useMemo 优化性能
  const viewerConfig = useMemo(() => ({
    plugins,
  }), []);

  return (
    <div className={`prose max-w-none ${className}`}>
      <Viewer
        value={value}
        plugins={plugins}
      />
    </div>
  );
}
